<template>
  <div>
    <el-row>
      <el-col :span="3" :offset="2">
        <el-tabs :stretch="true" v-model="activeName" type="card" @tab-click="tabClick">
          <el-tab-pane label="社保" name="2"></el-tab-pane>
          <el-tab-pane label="医保" name="1"></el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="4" :offset="15">
        <el-button size="small" type="primary" style="width:100px;" @click="createManage">创建</el-button>
      </el-col>
    </el-row>
    <el-table :data="channelTableData" style="width: 100%">
      <el-table-column align="center" prop="name" label="渠道名称"></el-table-column>
      <el-table-column align="center" prop="code" label="渠道标识码"></el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <span>{{scope.row.isUse | systemType}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="channelEdit(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="创建渠道" :visible.sync="channelDialogForm">
      <el-form :model="channeform" label-width="100px" :rules="channeRules" ref="channeform">
        <el-row>
          <ep-input
            @input-message="onChange"
            colspan="10"
            label="功能名称"
            :value="channeform.name"
            name="name"
          ></ep-input>
          <ep-input
            v-if="isEdit"
            :eleDisabled="true"
            @input-message="onChange"
            offset="2"
            colspan="10"
            label="渠道标识码"
            :value="channeform.code"
          ></ep-input>
        </el-row>
        <el-row>
          <ep-select
            @select-message="onChange"
            colspan="10"
            labelTitle="状态"
            :value="channeform.isUse"
            name="isUse"
            :eleDisabled="false"
          ></ep-select>
        </el-row>
        <el-row>
          <el-form-item label="渠道描述">
            <el-input type="textarea" v-model="channeform.description"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="channelDialogForm = false">取 消</el-button>
        <el-button type="primary" @click="channelSave('channeform')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      channeRules: {
        name: this.$rules("请输入渠道名称", 20),
        isUse: this.$rules("请输入功能状态", 20),
        description: this.$rulesMax(100)
      },
      id: "",
      isEdit: false,
      channelTableData: [],
      sysType:'2',
      channeform: {
        name: "",
        isUse: "",
        description: "",
        code: "",
        isUse: "",
      },
      activeName: "2",
      channelDialogForm: false
    };
  },
  created() {
    this.init(2);
  },
  methods: {
    init(type) {

      this.$get("/system/wfSystemList", {
        type: type,
        pageNum: 1,
        pageSize: 1000
      }).then(data => {
        if (data.data.success) {
          this.channelTableData = data.data.result.dataList;
        }
      });
    },
    onChange(data, type) {
      this.channeform[type] = data;
    },
    handleEdit(index, row) {},
    handleDelete(index, row) {},
    tabClick(tab, event) {
      this.sysType = tab.name
      this.init(tab.name);
    },
    createManage() {
      this.channeform.name = '';
      this.channeform.isUse = '';
      this.channeform.description = '';
      this.channeform.code = '';
      this.id = '';
      this.isEdit = false;
      this.channelDialogForm = true;
    },
    channelSave(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (!this.isEdit) {
            this.id = "";
          }
          this.$post("/system/save", {
            id: this.id,
            isUse: this.channeform.isUse,
            name: this.channeform.name,
            description: this.channeform.description,
            type: this.sysType
          }).then(data => {
            if(data.success){
              this.init(this.sysType)
              this.channelDialogForm = false
            }
            this.$mess(data);
          });
        } else {
          return false;
        }
      });
    },
    channelEdit(index, row) {
      this.isEdit = true;
      this.channelDialogForm = true;
      this.channeform.name = row.name;
      this.channeform.isUse = row.isUse;
      this.channeform.description = row.description;
      this.channeform.code = row.code;
      this.id = row.id;
    }
  }
};
</script>

<style scoped lang="css">
</style>
